<template>
  <div>
    <el-dialog :class="'el-dialog-theme3'" append-to-body draggable :close-on-click-modal="false"
      v-model="gdjOpen" v-if="gdjOpen" :title="gdjtitle" width="750px">
      <el-row>
        <el-col :span="3">
          <el-button type="success" style="margin-bottom: 10px" @click="handelAddGdjRow" icon="Plus">添加</el-button>
        </el-col>
        <el-col :span="21">
          <el-row justify="end">
            <span class="totalStyle" style="line-height: 2.2">
              共{{ changeGdjyqList.length }}条数据
            </span>
          </el-row>
        </el-col>
      </el-row>
      <el-table :data="changeGdjyqList" border max-height="500px" ref="changeElTable">
        <el-table-column label="序号" type="index" width="70" align="center" />
        <el-table-column label="名称" align="center" prop="label">
          <template #default="scope">
            <span v-if="!scope.row.isShow">{{ scope.row.label }}</span>
            <el-input v-model.trim="scope.row.label" v-else maxlength="100" />
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center" width="150">
          <template #default="scope">
            <el-button link icon="EditPen" v-if="!scope.row.isShow" @click="editGdjyq(scope)">编辑</el-button>
            <el-button link v-else @click="addGdjyq(scope)"><svg-icon icon-class="save" /><span
                style="margin-left: 6px">保存</span></el-button>
            <el-button link icon="Delete" @click="delDict(scope)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <template #footer>
        <div class="dialog-footer">
          <el-button type="danger" @click="gdjOpen = false">关闭</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { saveDict, getDicts, delData } from "@/api/system/dict/data";
import useDictStore from "@/store/modules/dict";
const { proxy } = getCurrentInstance();
const changeGdjyqList = ref([]);
const gdjtitle = ref("自定义选项");
const gdjOpen = ref(false);
const props = defineProps({
  dictData: {
    type: Array, //参数类型
    required: true, //是否必须传递
  },
  dictName: {
    type: String, //参数类型
    required: true, //是否必须传递
  },
});

function settingBut() {
  gdjOpen.value = true;
  changeGdjyqList.value = JSON.parse(JSON.stringify(props.dictData));
}

function handelAddGdjRow() {
  changeGdjyqList.value.push({ isShow: 1 });
  nextTick(() => {
    proxy.$refs["changeElTable"].$el.getElementsByClassName("el-table__row")[changeGdjyqList.value.length - 1].setAttribute("id", "remark");
    proxy.$refs["changeElTable"].$el
      .getElementsByClassName("el-table__row")
    [changeGdjyqList.value.length - 2].setAttribute("id", "temp");
    document.getElementById("remark").scrollIntoView(false);
  });
}

function editGdjyq(scope) {
  changeGdjyqList.value[scope.$index].isShow = 1;
}

function addGdjyq(scope) {
  if (scope.row.label) {
    let temp = JSON.parse(JSON.stringify(scope.row));
    delete temp.isShow;
    temp.dictType = props.dictName;
    temp.dictLabel = scope.row.label;
    delete temp.label;
    saveDict(temp).then((res) => {
      delete scope.row.isShow;
      proxy.$modal.msgSuccess(res.msg);
      getDictData(temp);
    });
  } else {
    proxy.$modal.msgError("名称不能为空");
  }
}

function getDictData(temp) {
  getDicts(temp.dictType).then((resp) => {
    let temp2 = {};
    temp2.list = resp.data.map((p) => ({
      label: p.dictLabel,
      value: p.dictValue,
      elTagType: p.listClass,
      elTagClass: p.cssClass,
      dictCode: p.dictCode,
    }));
    changeGdjyqList.value = JSON.parse(JSON.stringify(temp2.list));
    useDictStore().setDict(temp.dictType, temp2.list);
    temp2.typeName = temp.dictType;
  });
}

function delDict(scope) {
  if (scope.row.dictCode) {
    proxy.$modal
      .confirm("是否确认删除该字典的数据项？")
      .then(function () {
        delData(scope.row.dictCode).then((res) => {
          proxy.$modal.msgSuccess("删除成功");
          scope.row.dictType = props.dictName;
          getDictData(scope.row);
        });
      })
      .catch(() => { });
  } else {
    changeGdjyqList.value.splice(scope.$index, 1);
  }
}

// 记得暴露
defineExpose({
  settingBut,
});
</script>

<style></style>
